<template>
  <div>
    <el-dialog
      v-model="resetVideo"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :align-center="true"
      draggable
      title="视频播放"
      width="800"
      style="min-width: 800px"
      :before-close="hideOverlay"
    >
      <video
        v-if="resetVideo"
        id="myVideo"
        :src="url"
        autoplay
        controls
      ></video>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="hideOverlay">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="VideoShow">
import { toRefs } from "vue";
const emit = defineEmits(["changeVideoShow"]);

const props = defineProps({
  url: {
    type: String,
    default: "",
  },
  show: {
    type: Boolean,
    default: true,
  },
});

const { url, show } = toRefs(props);

function hideOverlay() {
  emit("changeVideoShow", false);
}

const resetVideo = ref(false);
watch(
  () => show.value,
  (newValue) => {
    resetVideo.value = newValue;
  }
);
</script>

<style lang="scss" scoped>
#myVideo {
  width: 100% !important;
  height: 450px;
  background-color: black;
}
:deep(.el-dialog__body) {
  padding: 0 20px !important;
}
</style>
